<template>
    <div>
        <a-button @click="$router.go(-1)">返回</a-button>
        <div style="margin-top:24px">
            <a-form class="search-form" :form="form" @submit="handleSearch" layout="inline">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="联系电话" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'phone1']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="购买者姓名" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'buyerName']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="姓名" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'userName']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="性别" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-select v-decorator="['sex']" style="width: 60px">
                                <a-select-option value="男">男</a-select-option>
                                <a-select-option value="女">女</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row style="margin-top: 10px">
                    <a-col :span="24" :style="{ textAlign: 'right' }">
                        <a-button type="primary" html-type="submit">搜索</a-button>
                        <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清除</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table bordered :columns="columns" :dataSource="searchResult.length>0?searchResult:users" rowKey="id">
            <span slot="action" slot-scope="record">
                <a-button size="small" @click="onItemDetail(record)">详情</a-button>
                <a-divider type="vertical"/>
                <a-button size="small" @click="onItemModify(record)">修改</a-button>
                <a-divider type="vertical"/>
                <a-button size="small" type="danger" @click="onItemDelete(record)">删除</a-button>
            </span>
        </a-table>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
export default {
    data() {
        return {
            searchResult: [],
            columns: [
                {
                    title: '购买者姓名',
                    key: 'buyerName',
                    dataIndex: 'buyerName',
                    align: 'center'
                },
                {
                    title: '姓名',
                    key: 'userName',
                    dataIndex: 'userName',
                    align: 'center'
                },
                {
                    title: '性别',
                    key: 'sex',
                    dataIndex: 'sex',
                    align: 'center'
                },
                {
                    title: '电话',
                    key: 'phone1',
                    dataIndex: 'phone1',
                    align: 'center'
                },
                {
                    title: '备注',
                    key: 'remarks',
                    dataIndex: 'remarks',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: 'center',
                    width: '20%'
                }
            ],
            form: this.$form.createForm(this)
        };
    },
    methods: {
        handleSearch(e) {
            e.preventDefault();
            this.form.validateFields((error, values) => {
                this.searchResult = _.filter(this.users, item => {
                    return (
                        item.phone1.includes(values.phone1) ||
                        item.buyerName.includes(values.buyerName) ||
                        item.userName.includes(values.userName) ||
                        item.sex === values.sex
                    );
                });
            });
        },

        handleReset() {
            this.form.resetFields();
            this.searchResult = [];
        },

        onItemDetail(item) {
            this.$router.push({
                name: 'UserDetail',
                query: {
                    id: item.id
                }
            });
        },
        onItemModify(item) {
            this.$router.push({
                name: 'ModifyUser',
                query: {
                    id: item.id
                }
            });
        },
        onItemDelete(item) {
            this.$confirm({
                title: '确定要删除这个客户吗？',
                content: (
                    <div>
                        <div>购买者姓名：{item.buyerName}</div>
                        <div>使用者姓名：{item.userName}</div>
                        <div>联系电话：{item.phone1}</div>
                    </div>
                ),
                onOk: () => {
                    this.$store
                        .dispatch('deleteUser', item)
                        .then(() => {
                            this.$success({ title: '客户已删除' });
                        })
                        .catch(reason => {
                            this.$error({ title: '删除失败' });
                        });
                }
            });
        }
    },
    computed: {
        ...mapGetters(['users'])
    }
};
</script>
<style lang="stylus" scoped>
.search-form {
    margin: 0px 10px 20px 0px;
}
</style>
